<template>
  <view class="live">
    <view class="live-hd">
      <view class="live-hd-left">
        <view class="title" :class="{ desc: topCurrent == 0 }" @click="onLiveTab(0)">直播预约</view>
        <view class="title" :class="{ desc: topCurrent == 1 }" @click="onLiveTab(1)">近期回顾</view>
      </view>
      <!-- <view class="live-hd-right">
        <text class="test">更多</text>
        <uv-icon name='arrow-right' size='26rpx' color="#B8B8B8"></uv-icon>
      </view> -->
    </view>
    <template v-if="topCurrent == 0">
      <tabDate @click="onTab"></tabDate>
    </template>
    <template v-else>
      <tabType @click="onTab"></tabType>
    </template>
    <view class="streaming">
      <view class="item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
        <view class="icon">
          <image :src="setUrl(item.thumb)" mode="aspectFill" class="img"></image>
          <view class="overlay"></view>
          <view class="time">{{ formatTimeData(item.start_at) }}</view>
        </view>
        <view class="title">{{ item.title }}</view>
        <view class="order">
          <view class="center">
            <view class="price" v-if="!item.is_free">{{ item.price }}投研币</view>
            <view class="price" v-else>免费</view>
            <!-- <view class="sign" v-if="topCurrent == 0">报名</view> -->
          </view>
          <view class="tag">
            <view class="test">{{ typeList[item.join_permission] }}</view>
            <template v-if="item.tagList && item.tagList.length">
              <view class="test" v-for="(item, index) in item.tagList" :key="index">{{ item.name }}</view>
            </template>
          </view>
          <view class="user" v-if="item.promoter" @click.stop="goUser(item, item.promoter)">
            <avatar :src='setUrl(item.promoter.avatar)' styles="width: 54rpx; height: 54rpx;"></avatar>
            <view class="name">{{ item.promoter.nickname }}</view>
          </view>
        </view>
      </view>
    </view>
    <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
  </view>
</template>

<script setup>
import tabDate from './tabDate.vue';
import tabType from './tabType.vue';
import { setUrl, formatTimeData } from '@/common';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { get } from '@/api';

const typeList = ref({
  1: '专场',
  2: '机构',
  3: '公开'
})
let topCurrent = ref(0);

let last_page = 0;
let page = 1;
let list = ref([]);
let showLeng = ref(false);
let tagId = 0;

onLoad(() => {
  getList();
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  getList();
})

function getList(date){
  const params = {
    page,
    pagePer: 10
  }
  let url = '';
  if(topCurrent.value == 0){
    url = '/api/Live/getLiveList'
    if(tagId != 0) params.filterDate = tagId;
  }else{
    url = '/api/Live/getPaybackList'
    if(tagId != 0) params.filterTid = tagId;
  }
  get(url, params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function onLiveTab(index){
  page = 1;
  list.value = [];
  topCurrent.value = index;
  tagId = 0;
  getList();
}
function onTab(row){
  page = 1;
  list.value = [];
  tagId = row;
  getList();
}
function goUser(row, item){
  // #ifdef WEB
  return;
  // #endif
  let url = row.type == 1 ? `/pages/mine/myTheme/index?id=${item.id}` : `/pages/mine/official/index?id=${item.id}`;
  
  uni.navigateTo({
    url
  });
}
function goDetail(row){
  uni.navigateTo({
    url: `/pages/research/liveDetail?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .live{
    padding: 0 30rpx;
    padding-top: 30rpx;
    .streaming{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      .item{
        width: 49%;
        height: 500rpx;
        border: 1rpx solid #E9E9E9;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        overflow: hidden;
        position: relative;
        .order{
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          padding: 14rpx;
          padding-top: 0;
          .user{
            display: flex;
            align-items: center;
            padding-top: 14rpx;
            .name{
              font-weight: 400;
              font-size: 26rpx;
              color: #000000;
              padding-left: 20rpx;
            }
          }
          .tag{
            padding-top: 14rpx;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .test{
              height: 44rpx;
              line-height: 44rpx;
              border-radius: 44rpx;
              padding: 0 20rpx;
              background: #94949414;
              font-weight: 400;
              font-size: 24rpx;
              color: #000000;
              margin-right: 8rpx;
              margin-bottom: 8rpx;
              text-align: center;
            }
          }
          .center{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding-top: 14rpx;
            .sign{
              width: 118rpx;
              height: 44rpx;
              line-height: 44rpx;
              background-color: #ff484514;
              border-radius: 7rpx;
              border: 1px solid #FF3B38;
              font-weight: 500;
              font-size: 26rpx;
              color: #FF3B38;
              text-align: center;
            }
            .price{
              font-weight: 500;
              font-size: 26rpx;
              color: #FF3532;
            }
          }
        }
        .title{
          width: 100%;
          font-weight: 500;
          font-size: 26rpx;
          color: #000000;
          padding: 0 14rpx;
          margin-top: 14rpx;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .icon{
          height: 205rpx;
          width: 100%;
          position: relative;
          overflow: hidden;
          .time{
            font-weight: 500;
            font-size: 26rpx;
            color: #FFFFFF;
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 0 16rpx;
            padding-bottom: 16rpx;
            width: 100%;
            z-index: 3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .overlay{
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.63) 0%, rgba(0, 0, 0, 0) 100%);
          }
        }
      }
    }
    &-hd{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      &-left{
        display: flex;
        align-items: flex-end;
        .title{
          font-weight: 400;
          font-size: 24rpx;
          color: #868686;
          padding-right: 60rpx;
          &.desc{
            font-weight: 500;
            font-size: 32rpx;
            color: #2B2B2B;
          }
        }
      }
      &-right{
        display: flex;
        align-items: center;
        .test{
          font-weight: 400;
          font-size: 28rpx;
          color: #B8B8B8;
          padding-right: 6rpx;
        }
      }
    }
  }
</style>